/* eslint-disable unicorn/no-array-reduce */
/* eslint-disable unicorn/prefer-query-selector */
import colors from 'css-color-function';

const lightConfig = {
  'dark-2': 'shade(20%)',
  'light-3': 'tint(30%)',
  'light-5': 'tint(50%)',
  'light-7': 'tint(70%)',
  'light-8': 'tint(80%)',
  'light-9': 'tint(90%)',
};

const darkConfig = {
  'light-3': 'shade(20%)',
  'light-5': 'shade(30%)',
  'light-7': 'shade(50%)',
  'light-8': 'shade(60%)',
  'light-9': 'shade(70%)',
  'dark-2': 'tint(20%)',
};

const themeId = 'theme-vars';

/**
 * @author Jason
 * @description 用于生成elementui主题的行为变量
 * 可选值有primary、success、warning、danger、error、info
 */

export const generateVars = (color: string, type = 'primary', isDark = false) => {
  const colos = {
    [`--el-color-${type}`]: color,
  };
  const config: Record<string, string> = isDark ? darkConfig : lightConfig;
  for (const key in config) {
    colos[`--el-color-${type}-${key}`] = `color(${color} ${config[key]})`;
  }
  return colos;
};

/**
 * @author Jason
 * @description 用于设置css变量
 * @param key css变量key 如 --color-primary
 * @param value css变量值 如 #f40
 * @param dom dom元素
 */
export const setCssVar = (key: string, value: string, dom = document.documentElement) => {
  dom.style.setProperty(key, value);
};

/**
 * @author Jason
 * @description 设置主题
 */
export const setTheme = (options: Record<string, string>, isDark = false, subTheme: string) => {
  const varsMap: Record<string, string> = Object.keys(options).reduce((prev, key) => {
    return Object.assign(prev, generateVars(options[key], key, isDark));
  }, {});

  let theme = Object.keys(varsMap).reduce((prev, key) => {
    const color = colors.convert(varsMap[key]);
    return `${prev}${key}:${color};`;
  }, '');

  theme = `${theme}--sub-theme:${subTheme};`;

  theme = `:root{${theme}}`;
  let style = document.getElementById(themeId);
  if (style) {
    style.innerHTML = theme;
    return;
  }
  style = document.createElement('style');
  style.setAttribute('type', 'text/css');
  style.setAttribute('id', themeId);
  style.innerHTML = theme;
  document.head.append(style);
};
